<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport"
		content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
	<title>疫情分析系统</title>
	<link rel="stylesheet" href="./res/layui/css/layui.css">
	<link rel="stylesheet" href="./res/static/css/index.css">
	<link rel="icon" href="./images/favicon.ico">
	<script src="./highCharts/art-template.js"></script>
	<script src="./api/config.js"></script>
	<script src="./highCharts/jquery-3.2.1.js"></script>
</head>
<style>
	.nav .layui-nav .layui-nav-item {
		display: inline-block;
		margin: 0 49px;
		line-height: 80px;
	}
</style>

<body style="background-image: url('../res/static/img/bg.jpg')">

	<!-- nav部分 -->
	<div class="nav index">
		<div class="nav-logo">
			<a href="./status.html">
				<img src="./res/static/img/logo.png" width="65" style="margin-left: 20px;">
			</a>
		</div>

		<div class="layui-container">
			<div class="nav-list">
				<button>
					<span></span><span></span><span></span>
				</button>
				<ul class="layui-nav" lay-filter="" style="margin: 0 -15px;">
					<li class="layui-nav-item"><a href="status.html">疫情现状</a></li>
					<li class="layui-nav-item"><a href="nat.html">核酸检测</a></li>
					<li class="layui-nav-item layui-this"><a href="news.html">疫情新闻</a></li>
					<li class="layui-nav-item"><a href="virus.html">专题展示</a></li>
					<li class="layui-nav-item"><a href="way.html">出行速查</a></li>
					<li class="layui-nav-item"><a href="resident.html">居民上报</a></li>
					<li class="layui-nav-item"><a href="hospital.html">医院速查</a></li>
				</ul>
			</div>
		</div>
	</div>

	<!-- main -->
	<div class="main-news">
		<div class="layui-container">
			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
				<legend>新闻</legend>
			</fieldset>
			<div class="layui-collapse" lay-accordion="" id="test_test">
				</div>
				  <div class="layui-collapse" lay-filter="test">
					<div class="layui-colla-item">
					  <h2 class="layui-colla-title"><div id="gengduo">点击查看更多▼</div></h2>
					</div>
				  </div>
			</div>
		</div>
	</div>


	
	<script src="./res/layui/layui.all.js"></script>

	<script>
	



		layui.use(['dropdown', 'util', 'layer','element'], function () {
			var element = layui.element;
			var layer = layui.layer;

			//监听折叠
			element.on('collapse(test)', function (data) {
				layer.msg('展开状态：' + data.show);
			});




		});


		var limit = 5;
		var page = 1;
		function loadIno(page,limit) {
			$.ajax({
				url: "http://localhost:8080/admin/news/news/list",
				type: "Post",
				data: { "page": page, "limit":limit },
				success: function (data) {
					if(data.data.length == 0){
						$("#gengduo").html("已经没有更多了")
					}
					for (var i = 0; i < data.data.length; i++) {
						// $("#test_test").append(' <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"><legend id="title" style="font-size: 28px;font-weight: bold">   <div class="layui-colla-item"><h2 class="layui-colla-title">新闻标题:</h2> <div class="layui-colla-content"><p> </p></div></div>   </legend></fieldset>')
						$("#test_test").append(' <hr class="layui-bg-red"> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"><legend id="title" style="font-size: 28px;font-weight: bold">      <div class="layui-colla-item"><h3 class="layui-colla-title">      ' + data.data[i].news_title + '</h3>   </legend></fieldset>    <div class="layui-colla-content layui-show"><li class="layui-timeline-item"><i class="layui-icon layui-timeline-axis"></i><div class="layui-timeline-content layui-text"><span id="time">发布时间:' + data.data[i].news_createtime + ' </span><br><img id="image-content" src="' + data.data[i].news_picture + '"><br>' + data.data[i].news_content + '<hr></div></li></div></div>')
					}
				}
			});
		}

		loadIno(page++,limit);

		$("#gengduo").click(() =>{
			loadIno(page++,limit);
		});


	</script>


</body>

</html>